<template>
  <view class="page">
    <view class="comment margin-bottom">
      <view class="comment_top">
        <view class="comment_top--left">
          <text>综合评分</text>
          <u-rate
            :count="5"
            v-model="$data.commentScore"
            :activeColor="BasicConfig.MainColor"
          ></u-rate>
        </view>
        <view class="comment_top--right">
          <text>{{ $data.commentGood }}%好评</text>
          <!-- <view class="margin-left-xs">
            <up-icon
              name="arrow-right"
              :color="BasicConfig.MainColor"
            ></up-icon>
          </view> -->
        </view>
      </view>
      <view class="comment_bottom">
        <view
          class="tab"
          :class="[{ 'tab--active': searchObj.is_picture == 0 }]"
          @tap="onCheckSearch('all')"
        >
          全部({{ $data.commentTotal }})
        </view>
        <view
          class="tab margin-left"
          :class="[{ 'tab--active': searchObj.is_picture == 1 }]"
          @tap="onCheckSearch('pic')"
        >
          有图({{ $data.commentImageTotal }})
        </view>
      </view>
    </view>
    <view class="bg-white min-height-100">
      <ListServiceComment ref="RefData" @total="onCommentTotal" />
    </view>
    <PopupLogin />
  </view>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, nextTick } from "vue";
import {
  onLoad,
  onShow,
  onHide,
  onReady,
  onReachBottom,
  onPullDownRefresh,
} from "@dcloudio/uni-app";
import BasicConfig from "@/utils/config";
import ListServiceComment from "../components/ListServiceComment.vue";
const Instance = getCurrentInstance();
const $vm = Instance?.appContext.config.globalProperties;
const $data = reactive({
  commentTotal: 0,
  commentGood: 0,
  commentScore: 0,
  commentImageTotal: 0,
  scoreTotal: 5, // 总分
});
const searchObj = reactive({
  domesticServiceId: "",
  is_picture: 0, // 筛选有图 0.默认全部，1.查看有图
  page: 1,
  limit: 20,
});
onLoad((options) => {
  searchObj.domesticServiceId = options.domesticServiceId;
});
const onCommentTotal = (e, p, q, m) => {
  $data.commentTotal = e;
  $data.commentGood = p;
  $data.commentImageTotal = q;
  $data.commentScore = m;
  console.log("onCommentTotal", e, p, q, m);
};
const onCheckSearch = (type) => {
  searchObj.is_picture = type === "pic" ? 1 : 0;
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 300, // 滚动动画时长，单位为 ms
  });
  fnGetDatas($vm.$ListLoadEnum.load);
};
const RefData = ref();
/** 获取数据列表 */
const fnGetDatas = (type = $vm.$ListLoadEnum.load) => {
  RefData.value.loadDatas(type, searchObj);
};
onReady(() => {
  // nextTick(() => {
  //   fnGetDatas();
  // });
  setTimeout(() => {
    fnGetDatas($vm.$ListLoadEnum.load);
  }, 1000);
});
/** 下滑加载 */
onReachBottom(() => {
  fnGetDatas($vm.$ListLoadEnum.bottom);
});
/** 下拉刷新 */
onPullDownRefresh(() => {
  fnGetDatas($vm.$ListLoadEnum.load);
});
</script>

<style lang="scss" scoped>
.page {
  background: #f4f8fb;
  width: 100vw;
  min-height: 100vh;
  padding-bottom: 300rpx;
  .comment {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 999999;
    background: #ffffff;
    &_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      &--left {
        font-size: 34rpx;
        display: flex;
        align-items: center;
      }
      &--right {
        display: flex;
        align-items: center;
        color: $main-color;
        font-size: 34rpx;
      }
    }
    &_bottom {
      display: flex;
      align-items: center;
      padding: 0 30rpx 30rpx 30rpx;
      .tab {
        border: 1px solid $main-color;
        padding: 4rpx 10rpx;
        border-radius: 16rpx;
        color: $main-color;
        background: #ffffff;
      }
      .tab--active {
        background: $main-color;
        color: #ffffff;
      }
    }
  }
}
</style>
